
<template>
	<view class="">
		<!-- #ifdef APP-PLUS -->
		<canvas class="watermarkCans" canvas-id="watermarkCanvas"></canvas>
		<!-- #endif -->
						
		<!-- 导航栏 -->
		<navigation :showIcon="false" title="红丝云"></navigation>
		<!-- 日历 -->
		<calendar @on-click="choose"></calendar>
		<!-- 跟进列表 -->
		<view class="box_list">
			<view class="follow_text">
				<text>今日跟进</text>
			</view>
			<view  v-if="todayData.length<=0" class=""  style="font-size: 30upx;color: #CCCCCC;text-align: center;">
				暂无跟进
			</view>
			<view v-else :class="['box_list_mian',showBtn?'':'bottomshake']">							
				<view v-for="(item,index) in todayData" :key="index">				  
					<view :style="{'transform':!item.animationShow?'translateX(150%)':'','transition': 'all 0.8s'}">
						<view class="box_mian"  >
							<view class="left">
								<view class="point_color" :style="{background:item.color}"></view>
								<view class="name_time" @click="customerDetail(item)">
									<text >{{item.mobile}} {{item.realname?item.realname:''}}</text>
									<text>{{item.create_time}}</text>
								</view>
							</view>
							<view class="right">
								<view class="btn" :style="{background:item.color}" @click="customerDetail(item)">
									{{item.active_status}}
								</view>
								<image @click="outIn(index)"  :style="{'transition': 'all 0.8s',transform:item.showMenu?'rotate(270deg)':'rotate(180deg)'}" src="../../static/images/top_nav.png" mode=""></image>
							</view>
						</view>
						<view class="box_btn"  :style="{'height':item.showMenu?'110upx':'0upx'}">
							<text style="background:rgba(244,88,88,1);" @click="gotoFollw(item.id)">写跟进</text>
							<!-- <text style="background:rgba(99,187,96,1);" @click="goPhone(item.id)">打电话</text> -->
							<!-- <text style="background:rgba(143,100,240,1);" @click="finish(index)">完成</text> -->
						</view>
					</view>	
			   </view>																	
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import watermark from '@/component/watermark.js'
	import { mapState,mapActions,mapMutations } from 'vuex'
	import navigation from '@/component/navigation.vue'
	import calendar from '@/component/dark-calendar/dark-calendar.vue'
	import sun from '@/utils/sun.js'
	const app=getApp().globalData
	export default {
		mixins: [watermark],
		components: {
			navigation,
			calendar
		},
		data() {
			return { 
			   version:'',//版本号
			   upgrade_package:'',
			   canvasText: '红丝云',
			   animationShow:true,//过度动画消失判断
			   showBtn:true,//过度动画消失后使用
			   showMenu:false,//小菜单显示	
			   showMenuIndex:'',//小菜单显示的索引	
			   todayData:[],//今日数据
			   today:"",//时间
			   page:0,//页数
			}
		},
		onLoad() {								
			//今日时间
			let date = new Date();
			let y = date.getFullYear();
			let m = date.getMonth();
			let d = date.getDate();
			this.today=`${y}-${m + 1}-${d}`;														
			if(!uni.getStorageSync('allPicker')){
				getApp().getAllPicker()
			}
		},
		mounted() {
			// 水印
			this.initWatermark();										
		},
		onShow() {
			//获取数据
			this.page=0
			this.todayData = [];
			this.getData({today:this.today});			
			setTimeout(()=>{
			  let user = uni.getStorageSync('user')
			  this.canvasText=user.realname?user.realname:'红丝云';				   							
			},600)
			
			//#ifdef APP-PLUS
			uni.getSystemInfo({
				success:(res) => {
					let _this=this
					//检测当前平台，如果是安卓则启动安卓更新  
					if(res.platform==="android"){						
						plus.runtime.getProperty(plus.runtime.appid,function(inf){							
						  _this.version=inf.version.split('.').join(''); 						   
						   _this.AndroidCheckUpdate(); 
						}); 	
						 
					}  
				}  
			})
			//#endif
			
			
		},
		computed:{
			// ...mapState({
			// 	a: 'a',
			// }),
		},
		
		
		//上拉触底
		onReachBottom(e){
			++this.page
			this.getData({page:this.page,today:this.today})
		},
		methods: {
			/**
			 * 安卓应用的检测更新实现
			 */
			AndroidCheckUpdate:function(){  
				var _this = this;  
				uni.request({
					//请求地址，设置为自己的服务器链接					
					url: "https://app.hongsizg.com/mobile/index/getVersionCrm",
					//method: 'GET',  
					data: {},  
					success: resMz => {						
						var server_version = resMz.data.data.version;
						var currTimeStamp = resMz.data.data.timestamp;
						_this.upgrade_package=resMz.data.data.upgrade_package;
						// 判断缓存时间
						uni.getStorage({
							key: 'tip_version_update_time',
							success: function (res) {
								var lastTimeStamp = res.data;
								//定义提醒的时间间隔，避免烦人的一直提示，一个小时：3600；一天：86400
								var tipTimeLength = 5;
								// var tipTimeLength = 10;					
								if((lastTimeStamp+tipTimeLength) > currTimeStamp){
									//避免多次提醒，不要更新
								}else{
									//重新设置时间戳
									_this.setStorageForAppVersion(currTimeStamp);
									//进行版本型号的比对 以及下载更新请求
									_this.checkVersionToLoadUpdate(server_version, _this.version);
								}
							},
							fail:function(res){
								_this.setStorageForAppVersion(currTimeStamp);
							}
						});
					},  
					fail: () => {},  
					complete: () => {}  
				});  
			},  
			/**
			 * //设置应用版本号对应的缓存信息
			 * @param {Object} currTimeStamp 当前获取的时间戳
			 */
			setStorageForAppVersion:function(currTimeStamp){
				uni.setStorage({
					key: 'tip_version_update_time',
					data: currTimeStamp,
					success: function () {
					}
				});
			},
			/**
			 * 进行版本型号的比对 以及下载更新请求
			 * @param {Object} server_version 服务器最新 应用版本号
			 * @param {Object} curr_version 当前应用版本号
			 */
			checkVersionToLoadUpdate:function(server_version,curr_version){
				let that=this
				if(parseInt(server_version) > parseInt(curr_version)){
					//TODO 此处判断是否为 WIFI连接状态
					if(plus.networkinfo.getCurrentType()!=3){
						uni.showModal({
							title: "版本更新",
							content: '有新的版本发布，网络状态为非Wifi连接是否立即进行新版本下载？',
							confirmText:'立即更新',
							cancelText:'稍后进行',
							success: function (res) {
								if (res.confirm) {
									uni.showToast({
										icon:"none",
										mask: true,
										title: '有新的版本发布，检测到您目前为数据流量连接，程序已启动自动更新。新版本下载完成后将自动弹出安装程序',  
										duration: 5000,  
									}); 
									//设置 最新版本apk的下载链接
									var downloadApkUrl ="https://app.hongsizg.com/upload/scrap/"+that.upgrade_package;
									var dtask = plus.downloader.createDownload( downloadApkUrl, {}, function ( d, status ) {  										
											// 下载完成
											if ( status == 200 ) {   
												that.installWgt(d.filename); // 安装wgt包  
											} else {  
												plus.nativeUI.alert("下载wgt失败！");  
											}  
											plus.nativeUI.closeWaiting();  
										});  
									dtask.start();
								} else if (res.cancel) {
								}
							}
						}); 
						return;  
					}else{
						uni.showModal({
							title: "版本更新",
							content: '有新的版本发布，是否立即进行新版本下载？',
							confirmText:'立即更新',
							cancelText:'稍后进行',
							success: function (res) {
								if (res.confirm) {
									uni.showToast({
										icon:"none",
										mask: true,
										title: '有新的版本发布，检测到您目前为Wifi连接，程序已启动自动更新。新版本下载完成后将自动弹出安装程序',  
										duration: 5000,  
									}); 
									//设置 最新版本apk的下载链接
									var downloadApkUrl ="https://app.hongsizg.com/upload/scrap/"+that.upgrade_package;
									var dtask = plus.downloader.createDownload( downloadApkUrl, {}, function ( d, status ) {  										
											// 下载完成
											if ( status == 200 ) {   
												that.installWgt(d.filename); // 安装wgt包  
											} else {  
												plus.nativeUI.alert("下载wgt失败！");  
											}  
											plus.nativeUI.closeWaiting();  
										});  
									dtask.start();
								} else if (res.cancel) {
								}
							}
						});
					}
				}
			},
			// 更新应用资源  
			 installWgt(path){  
				plus.nativeUI.showWaiting("安装wgt文件...");  
				plus.runtime.install(path,{},function(){  
					plus.nativeUI.closeWaiting();  
					plus.nativeUI.alert("应用资源更新完成！",function(){  
						plus.runtime.restart();  
					});  
				},function(e){  
					plus.nativeUI.closeWaiting();  
					plus.nativeUI.alert("安装wgt文件失败["+e.code+"]："+e.message);  
				});  
			},
		  //选择时间
		  choose(e){			 
			  this.todayData = [];
			  this.page = 0 ;
			  this.today=e
			  this.getData({page:this.page,today:this.today})
			  
		  },
		  //展示小菜单
		  getData(e){
			  let that=this			  			 		  
			  sun.request({
			  	url: "/h5/customer.customer/today",
			  	showLoading: true,
				token:true,
				data:{
					limit:5,//条数
					page:e.page?e.page:that.page,
					next_visit_time:e.today?e.today:"",//当天时间
				},
			  	success(res) {
			  	
					if(res.code==200){
						res.data.forEach((item,index)=>{
							item.showMenu=false;////小菜单显示
							item.animationShow = true ;//过度动画消失判断
							
						})
						that.todayData=that.todayData.concat(res.data)  ;
						
					}
			  	},
			  	fail(e) {
			  		uni.showToast({
			  			icon: "none",
			  			title: "服务器开小差去啦~",
			  		})
			  	}
			  })
			  
		  },
		  //打开小菜单
	      outIn(index){			 			  
			  if(this.showMenuIndex != index){
				  if(this.showMenuIndex===0||this.showMenuIndex){
					if(index<this.showMenuIndex){
					  this.todayData[this.showMenuIndex].showMenu = false  
					}
					if(index>this.showMenuIndex){					
					  this.todayData[this.showMenuIndex].showMenu = false  
					}	  
				  }				  
				  this.showMenuIndex = index;
				  this.todayData[this.showMenuIndex].showMenu =!this.todayData[this.showMenuIndex].showMenu;
				  
			  }else if(this.showMenuIndex == index){
				  this.showMenuIndex = index
				  this.todayData[this.showMenuIndex].showMenu = !this.todayData[this.showMenuIndex].showMenu
			  }		  
		  },
		  //完成
		  finish(index){			 
			  this.todayData[index].showMenu = !this.todayData[index].showMenu;	
					   
			  setTimeout(()=>{				 
			  	 this.todayData[index].animationShow =false;				 
			  },500)
			  setTimeout(()=>{
				 this.todayData.splice(index,1)
			  	 this.showBtn = false
				 setTimeout(()=>{
					 this.showBtn = true
				 },2000)
			  },1000)
			  
		  },
		  
		  // 写跟进
		  gotoFollw(id){
			
			  uni.navigateTo({
                  url:"../followUp/followUp?id="+id,
				  fail(e) {					
				  }
			  })
		  },
		  //打电话
		  goPhone(id){
			  sun.request({
			  	url: "/h5/customer.ring/tocall",
			  	showLoading: true,
				token:true,
				data:{
					id:id,
					type:'mobile'
				},
			  	success(res) {
					// res.data.mobile
					if(res.code==200){
						uni.makePhoneCall({
						    phoneNumber: res.data.mobile
						});
					}else{
						uni.showToast({
							icon:"none",
							title:res.msg
						})
					}
					
				}
			})
		  },
		  //进入客户详情
		  customerDetail(e){
			  uni.navigateTo({
			      url: '/pages/customer/detail?id=' + e.id+'&member_id='+ e.member_id
			  })
		  }
		}
	}
</script>


<style lang="less">
	
	.watermarkCans {
		width: 250rpx;
		height: 250rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}
	page {
		background: rgba(245, 246, 246, 1);
	}
    .bottomshake{
      animation: bottomshake 0.8s linear;
    }
    @keyframes bottomshake {
      0%{
         transform:translateY(136upx);           
      }      
      60%,80%{
        transform:translateY(-1%); 
      }
      70%,90%{
        transform:translateY(1%); 
      }
      100%{
        transform:translateY(0%);          
      }
    }
	.box_list {
		width: 100%;
		height: 100%;
		padding: 52upx 32upx;
		box-sizing: border-box;

		.follow_text {
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(118, 118, 118, 1);
			
		}

		.box_mian {
			
			margin-top: 29upx;
			padding: 34upx 15upx 34upx 30upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 5upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				justify-content: left;
				align-items: center;
				.point_color {
					width: 12upx;
					height: 12upx;
					background: rgba(64, 108, 235, 1);
					border-radius: 50%;
					margin-right: 30upx;
				}

				.name_time {
					height: 100%;
					display: flex;
					flex-direction: column;
					// align-items: center;
					justify-content: space-between;

					text:first-child {
						display: inline-block;
						width:380upx ;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(25, 25, 25, 1);
					}

					text:last-child {
						font-size: 22upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(155, 155, 155, 1);
					}
				}
			}

			.right {
				display: flex;
				justify-content: right;
				align-items: center;
				.btn {
					width: 149upx;
					height: 45upx;
					line-height: 45upx;
					background: rgba(64, 108, 235, 1);
					border-radius: 23upx;
					text-align: center;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 254, 254, 1);

				}

				image {
					margin-left: 24upx;
					width: 45upx;
					height: 45upx;
					transform: rotate(180deg);
				}
			}

		}
		.box_btn{
			width:100%;
			text-align: right;
			height: 110upx;
			line-height: 110upx;
			transition: all 0.8s; 
			overflow: hidden;
			text{
				width:118upx;
				height:45upx;
				display: inline-block;
				background:rgba(99,187,96,1);
				border-radius:23upx;
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(255,254,254,1);
				text-align: center;
				line-height: 45upx;
				margin-left: 35upx;
			}
		}
	}
	.animation{
		animation: all 1s;
	}
</style>
